<template>
	<view class="content">
		<!-- @query="queryList" -->
		<z-paging ref="paging" v-model="dataList" @query="queryList" :fixed="false" :auto="false" :empty-view-img-style="emptyImgStyle" :empty-view-img="emptyImg">
			<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内  @tap="goCpDet(item)"-->
			<view class="quesList" v-for="(item,index) in dataList" :key="index">
				<view class="quesTit">
					<view class="queType">{{index+1}}.{{item.queType}}</view>
					<view class="queTitCon spec">
						<rich-text :nodes="formatImgRichText(item.queSub)"></rich-text>
					</view>
				</view>
				<view class="quesOptions">
					<view class="optionsItem"
						v-for="(innerItem,innerIndex) in item.answerOptionArray"
						:key="innerIndex"
					>
						<view class="optionsNum">{{transOptToWords(innerIndex)}}</view>
						<view class="optionsCon">
							<template v-if="!checkIsImg(innerItem)">{{innerItem}}</template>
							<template v-else>
								<img class="optImg" :src="getUrl(innerItem)"/>
							</template>
						</view>
					</view>
				</view>
				<view class="ansBox">
					<view class="myAns">
						<text v-if="currRole == 'stu'">我的答案:</text>
						<text v-else-if="currRole == 'jz'">孩子答案:</text>
						<text v-else>学生答案:</text>
						<text :class="[item.myAns == item.realAns ? 'rightTxt' : 'errTxt']">{{item.myAns}}</text>
					</view>
					<view>正确答案:<text class="rightTxt">{{item.realAns}}</text></view>
				</view>
			</view>
		</z-paging>
		
	</view>
</template>

<script>
	import { getStudyLogDetail } from '@/api/zhuxue'
	import zhuxueUtils from '@/common/zhuxueUtils.js'
	export default {
		props:{
			currRole:String,
			tabIndex: {
				type: Number,
				default: function(){
					return 0
				}
			},
			//当前swiper切换到第几个index
			currentIndex: {
				type: Number,
				default: function(){
					return 0
				}
			},
			studyLogId:String,
			loreId:String,
			loreTypeName:String
		},
		data(){
			return{
				dataList: [],
				firstLoaded: false, 
				emptyImg:'/static/images/noData.png',
				emptyImgStyle:{
					"width":"240rpx",
					"height":"240rpx"
				}
			}
		},
		computed:{
			getUrl(url){
				return function(url){
					return this.zhuXueServer + '/' + url
				}
			},
			//设置img宽度
			formatImgRichText(){
				return function(content){
					if(content != undefined ){
						var reg = new RegExp("<img", "g");
						if(content.indexOf('<img') != -1){
							return content.replace(reg, '<img style="max-width:100%;height:auto;display:block"')
						}else{
							return content
						}
					}
				}
			},
			//数字->字母
			transOptToWords(){
				return function(number){
					var tmpWords = '';
					if(number == 0){
						tmpWords = "A";
					}else if(number == 1){
						tmpWords = "B";
					}else if(number == 2){
						tmpWords = "C";
					}else if(number == 3){
						tmpWords = "D";
					}else if(number == 4){
						tmpWords = "E";
					}else if(number == 5){
						tmpWords = "F";
					}
					return tmpWords;
				}
			},
			checkIsImg(){
				return function(content){
					if(content != undefined ){
						var reg = new RegExp("Module/", "g");
						if(content.indexOf('Module/') != -1){
							return true;
						}else{
							return false;
						}
					}
				}
			}
		},
		watch: {
			currentIndex: {
				handler(newVal) {
					if(newVal === this.tabIndex){
						//懒加载，当滑动到当前的item时，才去加载
						if(!this.firstLoaded){
							setTimeout(() => {
								this.$refs.paging.reload();
							}, 100);
						}
					}
				},
				immediate: true
			},
		},
		methods:{
			queryList(pageNo, pageSize) {
				//组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
				//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
				//ogzId:this.ogzId,messageType:this.typeId,showStatus:1,page:this.newsList[currentIndex].page,limit:this.limit
				const params = {
					studyLogId:this.studyLogId,
					loreId:this.loreId,
					loreTypeName:this.loreTypeName,
					pageNo: pageNo,
					limit: this.limit
				}
				uni.showLoading({
					title:"加载中",
					mask:true
				})
				//console.log(params)
				let contentStr = this.crypto.encrypt(JSON.stringify( params ));
				getStudyLogDetail({content:contentStr}).then(res=>{
					//console.log(res)
					var tmpRes = res.data.datas.sdList;
					var reg = new RegExp("Module/", "g");
					for(let i in tmpRes){
						if(tmpRes[i].queSub.indexOf('Module/') != -1){
							tmpRes[i].queSub = tmpRes[i].queSub.replace(reg, this.zhuXueServer + '/Module/');
						}
						tmpRes[i].answerOptionArray = zhuxueUtils.assignToArray(tmpRes[i].A,tmpRes[i].B,tmpRes[i].C,tmpRes[i].D,tmpRes[i].E,tmpRes[i].F);
					}
					//console.log(tmpRes)
					this.$refs.paging.complete(tmpRes);
					this.firstLoaded = true;
				}).catch(err=>{
					//console.log(err)
					this.$refs.paging.complete(true);
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/static/scss/zhuxueQue.scss';
	.content {
		height: 100%;
		@include respTo(phone){
			padding: 0 30rpx;
		}
		@include respTo(pad){
			padding: 0 20rpx;
		}
	}
	.quesList{
		margin-bottom: 20rpx;
		&:first-child{
			margin-top: 20rpx;
		}
	}
	.ansBox{
		@include respTo(phone){
			height: 80rpx;
			line-height: 80rpx;
			font-size: $font-size30;
		}
		@include respTo(pad){
			height: 50rpx;
			line-height: 50rpx;
			font-size: $padSize16;
		}
		display: flex;
		margin-top: 10rpx;
		color:$pss-text-color3;
		margin-bottom: -28rpx;
		.myAns{
			margin-right: 30rpx;
		}
		.rightTxt,
		.errTxt{
			font-weight: bold;
			margin-left: 5rpx;
			@include respTo(phone){
				font-size: $font-size34;
			}
			@include respTo(pad){
				font-size: $padSize18;
			}
		}
		.rightTxt{
			color: $pss-color-green;
		}
		.errTxt{
			color: $pss-color-red;
		}
	}
</style>